<template>
    <div style="text-align: center;background-color: #f1f1f3;height: 100%;padding: 0px;margin: 0px;">
        <h1 style="font-size: 50px;">{{'欢迎你！'+user.username}}</h1>
        <el-descriptions  title="个人中心" :column="2" size="40" border>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-s-custom"></i>
                    账号
                </template>
                {{user.loginName}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    电话
                </template>
                {{user.phonenum}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                  所属部门
                </template>
              {{user.department}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    角色
                </template>
              {{user.position}}
            </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              邮箱
            </template>
            {{user.email}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              简介
            </template>
            {{user.description}}
          </el-descriptions-item>
        </el-descriptions>

        <DateUtils></DateUtils>

    </div>
</template>

<script>
    import DateUtils from "./DateUtils";
    export default {
        name: "Home",
        components: {DateUtils},
        data() {
            return {
              user:{},
              hashMapRoles:{},
              hashMapOrganizations:{},
            }
        },
        computed:{

        },
        methods:{
            init(){
              this.user = JSON.parse(sessionStorage.getItem('user'));
            },
          loadOption() {
            this.$axios.get('/zzh-staff/option').then(res => res.data).then(res => {
              if (res.resultCode == 200) {
                this.hashMapRoles = res.data.hashMapRoles;
                this.hashMapOrganizations = res.data.hashMapOrganizations;
                this.user.department=this.hashMapOrganizations[this.user.department] || '无';
                this.user.position=this.hashMapRoles[this.user.position] || '无';
              } else {
                alert('获取数据失败')
              }
            })
          }
        },
        created(){
          this.init()
          this.loadOption()
        }
    }
</script>

<style scoped>
    .el-descriptions{
        width:90%;
        margin: 0 auto;
        text-align: center;
    }
</style>